<template>
  <div class="table">
    <div class="table-header">
      <el-button type="primary" @click="add">
        新增<el-icon><Plus /></el-icon>
      </el-button>
      <div class="search">
        <el-input
          type="input"
          v-model="keyword"
          autocomplete="off"
          placeholder="请输入姓名"
          style="width: 200px"
          class="search-input"
        ></el-input>
        <el-button type="primary" @click="search">
          搜索<el-icon><RefreshRight /></el-icon>
        </el-button>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" :title="title" append-to-body>
      <user-detail :form="form" :formLabel="formLabel"></user-detail>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click.native="cancel()">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-table :data="list" stripe style="width: 100%; height: 490px">
      <el-table-column
        v-for="item in tableLabel"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width ? item.width : 150"
      />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button type="primary" size="small" @click="editUser(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="deleteUser(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pager"
      background
      layout="prev, pager, next"
      :total="config.total"
      @current-change="changePage"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
} from "vue";
import UserDetail from "../../components/UserDetail.vue";
export default defineComponent({
  components: { UserDetail },
  setup() {
    const { proxy } = getCurrentInstance();
    const list = ref([]);
    const config = reactive({ page: 1, total: 0 });
    const tableLabel = reactive([
      {
        prop: "name",
        label: "姓名",
      },
      {
        prop: "age",
        label: "年龄",
      },
      {
        prop: "sexLabel",
        label: "性别",
      },
      {
        prop: "addr",
        label: "地址",
        width: 320,
      },
      {
        prop: "birth",
        label: "出生日期",
        width: 200,
      },
    ]);
    let keyword = ref("");
    let dialogVisible = ref(false);
    let title = ref("新增用户");
    let formLabel = reactive([
      {
        model: "name",
        label: "姓名",
        type: "input",
      },
      {
        model: "age",
        label: "年龄",
        type: "input",
      },
      {
        model: "sex",
        label: "性别",
        type: "select",
        opts: [
          {
            label: "男",
            value: 1,
          },
          {
            label: "女",
            value: 0,
          },
        ],
      },
      {
        model: "birth",
        label: "出生日期",
        type: "date",
      },
      {
        model: "addr",
        label: "地址",
        type: "input",
      },
    ]);
    let form = reactive({
      name: "",
      age: "",
      sex: "",
      addr: "",
      birth: "",
    });
    onMounted(() => {
      getUserData();
    });
    //获取用户表格数据
    const getUserData = async () => {
      let res = await proxy.$api.getUserData(config);
      config.total = res.count;
      list.value = res.list.map((item) => {
        item.sexLabel = item.sex === 0 ? "女" : "男";
        return item;
      });
    };

    //搜索
    const search = () => {
      config.name = keyword;
      getUserData(config);
    };
    //分页点击
    const changePage = (page) => {
      config.page = page;
      getUserData(config);
    };
    //新增
    const add = () => {
      title.value = "新增用户";
      dialogVisible.value = true;
    };
    //编辑
    const editUser = (row) => {
      dialogVisible.value = true;
      title.value = "更新用户";
      for (let key in row) {
        form[key] = row[key];
      }
    };

    //编辑确认
    const confirm = async () => {
      if (title.value == "新增用户") {
        await proxy.$api.addUser(form);
        proxy.$message.success("创建成功");
      } else {
        await proxy.$api.updateUser(form);
        proxy.$message.success("更新成功");
      }
      getUserData(config);
      dialogVisible.value = false;
    };

    //删除
    const deleteUser = (row) => {
      proxy
        .$confirm("这将删除该用户,确定吗?", "删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          draggable: true,
        })
        .then(async () => {
          await proxy.$api.deleteUser({ id: row.id });
          getUserData(config);
          proxy.$message.success("删除成功");
        })
        .catch(() => {});
    };

    //取消
    const cancel = () => {
      dialogVisible.value = false;
      //置空
      for (let key in form) {
        form[key] = "";
      }
    };

    return {
      list,
      tableLabel,
      config,
      changePage,
      editUser,
      deleteUser,
      keyword,
      search,
      dialogVisible,
      title,
      form,
      formLabel,
      cancel,
      confirm,
      add,
    };
  },
});
</script>

<style lang="less" scoped>
.table {
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search-input {
      margin-right: 10px;
    }
  }
  position: relative;
  .el-pagination {
    position: absolute;
    left: 20%;
    margin-top: 15px;
  }
}
</style>
